<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="${s.base}/mobile/css/weui.min.css">
    <link rel="stylesheet" href="${s.base}/mobile/css/jquery-weui.min.css">
    <link rel="stylesheet" href="${s.base}/mobile/css/weuix.min.css" />
    <link rel="stylesheet" href="${s.base}/mobile/css/index.css">
    <title>我的交友卡片</title></head>

<body>
<div class="main" style="height: auto;">
    <div class="weui-uploader">
        <div class="weui-uploader__bd">
            <ul class="weui-uploader__files" id="uploaderFiles" style="overflow: hidden;">
                <li class="weui-uploader__file show-actions" data-num="1" <#if (member.picOne!=null) && (member.picOne??)>style="background-size: cover; background-image: url('${member.picOne}');"</#if>></li>
                <li class="weui-uploader__file show-actions"  data-num="2" <#if (member.picTwo!=null) && (member.picTwo??)>style="background-size: cover; background-image: url('${member.picTwo}');"</#if>></li>
                <li class="weui-uploader__file show-actions"  data-num="3" <#if (member.picThree!=null) && (member.picThree??)>style="background-size: cover; background-image: url('${member.picThree}');"</#if>></li>
                <li class="weui-uploader__file show-actions"  data-num="4" <#if (member.picFour!=null) && (member.picFour??)>style="background-size: cover; background-image: url('${member.picFour}');"</#if>></li>
                <li class="weui-uploader__file  show-actions"  data-num="5" <#if (member.picFive!=null) && (member.picFive??)>style="background-size: cover; background-image: url('${member.picFive}');"</#if>></li>
            </ul>
            <div class="weui-uploader__input-box" id="file" style="display: none;">
            </div>
        </div>
    </div>
    <div class="weui-cells" style="margin-top: 0;">
        <div class="weui-cell">
            <div class="weui-cell__hd">
                <img src="${member.headImage}" alt="" style="width:3rem;height: 3rem;border-radius: 50%; margin-right:1rem;display:block"></div>
            <div class="weui-cell__bd">
                <p style="margin-bottom: 0.2rem;">${member.nickName} &nbsp
                    <#if member.sex=="1">
                        <img src="${s.base}/mobile/img/man.png" width="15"/>
                        <#else>
                            <img src="${s.base}/mobile/img/women.png" width="15"/>
                    </#if>

                </p>
                <#list member.memberTagList as memberTag>
                    <label class="label" style="background: #ecfaff;color: #75afc7;">${memberTag}</label>
                </#list>
                </div>
            <div class="weui-cell__ft"></div>
        </div>
        <a class="weui-cell weui-cell_access" href="javascript:inputUpdate('个性签名','introduct');">
            <div class="weui-cell__bd">
                <p>个性签名</p>
            </div>
            <div class="weui-cell__ft" id="introduct">${member.introduct!'未填'}</div></a>
        <a class="weui-cell weui-cell_access" href="javascript:inputUpdate('我的期待','want');">
            <div class="weui-cell__bd">
                <p>我的期待</p>
            </div>
            <div class="weui-cell__ft" id="want">${member.want!'未填'}</div></a>
        <a class="weui-cell weui-cell_access" href="javascript:inputUpdate('学校','schoolName');">
            <div class="weui-cell__bd">
                <p>学校</p>
            </div>
            <div class="weui-cell__ft" id="schoolName">${member.schoolName!'未填'}</div></a>
        <a class="weui-cell weui-cell_access" href="javascript:inputUpdate('来自地区','comeAddress');">
            <div class="weui-cell__bd">
                <p>来自地区</p>
            </div>
            <div class="weui-cell__ft" id="comeAddress">${member.comeAddress!'未填'}</div></a>
        <a class="weui-cell weui-cell_access" href="javascript:inputUpdate('长居地区','useAddress');">
            <div class="weui-cell__bd">
                <p>长居地区</p>
            </div>
            <div class="weui-cell__ft" id="useAddress">${member.useAddress!'未填'}</div></a>

        <a class="weui-cell weui-cell_access" href="javascript:updateSex('性别','sex');">
            <div class="weui-cell__bd">
                <p>性别</p>
            </div>
            <div class="weui-cell__ft" id="sex">
                <#if member.sex=="1">
                    男
                    <#else>
                        女
                </#if>
            </div></a>
        <a class="weui-cell weui-cell_access" href="javascript:updateHeight('身高','memberHeight');">
            <div class="weui-cell__bd">
                <p>身高</p>
            </div>
            <div class="weui-cell__ft" id="memberHeight">${member.memberHeight}</div></a>
    </div>
    <div class="weui-cells cells">
        <h4 class="color-pink" style="padding-left: 15px;font-weight: normal;">我的标签</h4>
        <a class="weui-cell weui-cell_access cell" href="javascript:updateMore('请选择我的标签','memberTag','2');">
            <div class="weui-cell__bd">
                <p style="color: #999999"  id="memberTag">
                    <#if member.memberTagList?? && member.memberTagList!size gt 0>
                        <#list member.memberTagList as memberTag>
                            <label class="label" style="background: #ecfaff;color: #75afc7;">${memberTag}</label>
                        </#list>
                        <#else>
                            点此选择我的标签
                    </#if>

                </p>
            </div>
        </a>
    </div>
    <div class="weui-cells cells">
        <h4 class="color-pink" style="padding-left: 15px;font-weight: normal;">可聊话题</h4>
        <a class="weui-cell weui-cell_access cell" href="javascript:updateMore('请选择可聊话题','likeTheme','3');">
            <div class="weui-cell__bd">
                <p style="color: #999999"  id="likeTheme">
                    <#if member.likeThemeList?? && member.likeThemeList!size gt 0>
                        <#list member.likeThemeList as likeThemes>
                            <label class="label" style="background: #ecfaff;color: #d8cb4b;">${likeThemes}</label>
                        </#list>
                        <#else>
                            点此选择可聊话题
                    </#if>
                </p>
            </div>
        </a>
    </div>
    <div class="weui-cells cells">
        <h4 class="color-pink" style="padding-left: 15px;font-weight: normal;">喜欢的运动</h4>
        <a class="weui-cell weui-cell_access cell" href="javascript:updateMore('请选择喜欢的运动','likeSports','4');">
            <div class="weui-cell__bd">
                <p style="color: #999999"  id="likeSports">
                    <#if member.likeSportList?? && member.likeSportList!size gt 0>
                        <#list member.likeSportList as likeSport>
                            <label class="label" style="background: #ecfaff;color: #5f5172;">${likeSport}</label>
                        </#list>
                        <#else>
                            点此选择喜欢的运动
                    </#if>
                </p>
            </div>
        </a>
    </div>
    <div class="weui-cells cells">
        <h4 class="color-pink" style="padding-left: 15px;font-weight: normal;">音乐偏好</h4>
        <a class="weui-cell weui-cell_access cell" href="javascript:updateMore('请选择音乐偏好','likeMusic','5');">
            <div class="weui-cell__bd">
                <p style="color: #999999"  id="likeMusic">
                    <#if member.likeMusicList?? && member.likeMusicList!size gt 0>
                        <#list member.likeMusicList as likeMusics>
                            <label class="label" style="background: #ecfaff;color: #d8cb4b;">${likeMusics}</label>
                        </#list>
                        <#else>
                            点此选择音乐偏好
                    </#if>
                </p>
            </div>
        </a>
    </div>

</div>
<#if member.status=="2">
    <div id="checkBtn">
        <div class="bg-pink"  onclick="checkSubmit()" style="display: inline-block;padding: 0.4rem 0;color: #fff;font-size: 0.8rem;border-radius: 25px;
	text-align: center;width: 84%;margin: 2rem 8%;">提交审核</div>
    </div>
</#if>


<div id="inputType" class="weui-popup__container">
    <div class="weui-popup__overlay"></div>
    <div class="weui-popup__modal">
        <div class="container">
            <div class="page-hd">
                <h1 class="page-hd-title" id="inputTitle"></h1></div>
            <div class="page-bd-15">
                <div class="weui-cells cells">
                    <div class="weui-cell">
                        <div class="weui-cell__bd">
                            <form>
                                <input type="text" x-webkit-speech="" name="" class="weui-input" id="inputValue"></form>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bg-pink" onclick="inputSubmit()" style="display: inline-block;padding: 0.4rem 0;color: #fff;font-size: 0.8rem;border-radius: 25px;
	text-align: center;width: 84%;position: absolute;bottom: 4rem;left: 0;right: 0;margin: 0 auto;">提交</div>
        </div>
    </div>
</div>

<div id="selectType" class="weui-popup__container">
    <div class="weui-popup__overlay"></div>
    <div class="weui-popup__modal">
        <div class="container">
            <div class="page-hd">
                <h1 class="page-hd-title" id="selectTitle"></h1></div>
            <div class="page-bd-15">
                <div class="weui-cells cells">
                    <div class="weui-cell">
                        <div class="weui-cell__bd">
                            <form>
                                <input type="text" x-webkit-speech=""class="weui-input" id="selectShow">
                                <input type="hidden" name="" id="selectValue">
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bg-pink" onclick="selectSubmit()" style="display: inline-block;padding: 0.4rem 0;color: #fff;font-size: 0.8rem;border-radius: 25px;
	text-align: center;width: 84%;position: absolute;bottom: 4rem;left: 0;right: 0;margin: 0 auto;">提交</div>

        </div>
    </div>
</div>


<div id="labelType" class="weui-popup__container">
    <div class="weui-popup__overlay"></div>
    <div class="weui-popup__modal">
        <div class="main">
            <div class="page-hd">
                <h1 class="page-hd-title" style="font-weight: bold;" id="labelTitle">
                    选择能描述你的标签
                </h1>
            </div>
            <div class="weui-form"  id="labelShow" data-id="">
            </div>
            <div class="bg-pink" onclick="labelSubmit()" style="display: inline-block;padding: 0.4rem 0;color: #fff;font-size: 0.8rem;border-radius: 25px;
	text-align: center;width: 84%;position: absolute;bottom: 4rem;left: 0;right: 0;margin: 0 auto;">提交</div>
        </div>
    </div>
</div>

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<script src="${s.base}/mobile/js/jquery-2.1.4.min.js"></script>
<script src="${s.base}/mobile/js/swiper.min.js"></script>
<script src="${s.base}/mobile/js/zepto.weui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="${s.base}/mobile/js/index.js"></script>
<script src="${s.base}/mobile/js/base.js"></script>
<script type="text/javascript" src="${s.base}/js/base/ajaxfileupload.js"></script>

<!--js分享代码开始-->
<input type="hidden" value="${jSTicketShareResponse.appid}" id="appid" />
<input type="hidden" value="${jSTicketShareResponse.fxTitle}" id="fxTitle" />
<input type="hidden" value="${jSTicketShareResponse.fxImgUrl}" id="fxImgUrl" />
<input type="hidden" value="${jSTicketShareResponse.fxDesc}" id="fxDesc" />
<input type="hidden" value="${jSTicketShareResponse.fxUrl}" id="fxUrl" />
<input type="hidden" value="${jSTicketShareResponse.nonceStr}" id="nonceStr" />
<input type="hidden" value="${jSTicketShareResponse.timestamp}" id="timestamp" />
<input type="hidden" value="${jSTicketShareResponse.signature}" id="signature" />
<script src="${s.base}/mobile/js/share.js"></script>
<script>
    var memberId='${memberId}';
    var id="";
    var num=1;
    //提交审核
    function checkSubmit() {
        $.showLoading("正在审核中...");
        $.post("/phone/checkMember", {
            memberId: memberId
        }, function (resultInfo) {
            $.hideLoading();
            if (resultInfo.code==0) {
                $("#checkBtn").hide();
            }else{
                $.alert(resultInfo.msg);
            }
        }, "json");
    }
    function labelChange(obj) {
        if($(obj).hasClass("selected")==false){
            $(obj).addClass("selected");
        }else{
            $(obj).removeClass("selected");
        }
    }
    //多选修改
    function updateMore(title,id,type) {
        $("#labelTitle").html(title);
        $("#labelShow").attr("data-id",id);
        $.showLoading("正在加载中...");
        $("#labelShow").html("");
        $.post("/phone/acceptDict", {
            memberId: memberId,
            type:type
        }, function (resultInfo) {
            $.hideLoading();
            if (resultInfo.code==0) {
                if (resultInfo.data!=null && resultInfo.data.length > 0){
                    for(var j=0;j<resultInfo.data.length;j++){
                        var obj = resultInfo.data[j];
                        var t="";
                        if(obj.status=="1"){
                            t="selected";
                        }
                        var itemListHtml='<label onclick="labelChange(this)" class="label_button '+t+'" data-id="'+obj.id+'">'+obj.name+'</label>';
                        $("#labelShow").append(itemListHtml);
                    }
                    $("#labelType").popup();
                }else{
                    $.toast("没有数据")
                }
            }else{
                $.alert("获取失败！");
            }
        }, "json");
    }
    //标签
    function labelSubmit() {
        var s="";
        $("#labelShow .selected").each(function (index,obj) {
            if(index==0){
                s=obj.innerHTML;
            }else{
                s+=","+obj.innerHTML;
            }
        });
        if(s==""||s==null){
            $.toast("请选择内容！","text");
            return false;
        }
        var id=$("#labelShow").attr("data-id");
        submitPostReturn(id,s,function (data) {
            $("#"+id).html("");
            var color="#75afc7";
            if("likeTheme"==id){
                color="#d8cb4b";
            }else if("likeSports"==id){
                color="#5f5172";
            }
            $("#labelShow .selected").each(function (index,obj) {
                $("#"+id).append('<label class="label" style="background: #ecfaff;color: '+color+';">'+obj.innerHTML+'</label>');
            });

        });
    }

    //性别修改
    function updateSex(title,id) {
        $("#selectTitle").html(title);
        $("#selectShow").attr("name",id);
        $("#selectValue").val(id);
        $("#selectShow").val($("#"+id).html());
        $("#selectType").popup();
        $("#selectShow").select({
            title: title,
            items: [
                {
                    title: "男",
                    value: "1",
                },
                {
                    title: "女",
                    value: "2",
                }
            ],
            onClose: function (d) {
                $("#selectValue").val(d.data.values);
                $("#selectShow").val(d.data.titles);
            }
        });
    }
    //身高修改
    function updateHeight(title,id) {
        $("#selectTitle").html(title);
        $("#selectShow").attr("name",id);
        $("#selectValue").val(id);
        $("#selectShow").val($("#"+id).html());
        $("#selectType").popup();
        var item=new Array();
        for(var i=140;i<200;i++){
            var t=new Object();
            t.title=i+"cm";
            t.value=i+"cm";
            item.push(t);
        }
        $("#selectShow").select({
            title: title,
            items:item,
            onClose: function (d) {
                $("#selectValue").val(d.data.values);
                $("#selectShow").val(d.data.titles);
            }
        });
    }
    //下拉框框提交
    function selectSubmit() {
        submitPost($("#selectShow").attr("name"),$("#selectValue").val(),$("#selectShow").val());
    }


    //输入框类型
    function inputUpdate(title,id) {
        $("#inputTitle").html(title);
        $("#inputValue").attr("name",id);
        $("#inputValue").val($("#"+id).html());
        $("#inputType").popup();
    }
    //输入框提交
    function inputSubmit() {
        submitPost($("#inputValue").attr("name"),$("#inputValue").val(),$("#inputValue").val());
    }

    //提交信息
    function submitPostReturn(key,value,successFn) {
        $.showLoading("正在更换中...");
        var params='{'+key+':"'+value+'",memberId:"'+memberId+'"}';
        $.post("/phone/updateMember",eval("("+params+")"), function (resultInfo) {
            $.hideLoading();
            if (resultInfo.code==0) {
                if(typeof(successFn) == "function"){
                    successFn(resultInfo.data);
                }
            }else{
                $.alert("保存失败");
            }
            $.closePopup();
        }, "json");
    }
    //提交信息
    function submitPost(key,value,showValue) {
        $.showLoading("正在更换中...");
        var params='{'+key+':"'+value+'",memberId:"'+memberId+'"}';
        $.post("/phone/updateMember",eval("("+params+")"), function (resultInfo) {
            $.hideLoading();
            if (resultInfo.code==0) {
                $("#"+key).html(showValue);
            }else{
                $.alert("保存失败");
            }
            $.closePopup();
        }, "json");
    }

    //动态设置附件
    function setFile() {
        id="f"+new Date().getTime();
        $("#file").html('<input name="myfiles" id="'+id+'" onchange="changeFile(\''+id+'\')" class="weui-uploader__input" accept="image/*" type="file"/>')
    }
    //上传图片
    function changeFile(id) {
        $.showLoading("正在上传中...");
        ajaxFileUploadReturn(id,$(This).attr("data-num"),memberId,function (src) {
            This.context.style.backgroundSize = 'cover';
            $(This).css("background-image", 'url(' + src + ')');
            $.hideLoading();
            setFile();
        })
    }
    var This=null;
    $(function() {
        setFile();
        var li = $(".weui-uploader__file");
        $('.show-actions').click(function() {
            This = $(this);
            var str = This.css("backgroundImage").replace('url(', '').replace(')', '');
            if (str.indexOf("plus") != -1) {
                $("#"+id).click()
            } else {
                $.actions({
                    title: "",
                    onClose: function() {
                    },
                    actions: [{
                        text: "更换照片",
                        className: "color-pink",
                        onClick: function() {
                            $("#"+id).click()
                        }
                    },{
                            text: "设为封面",
                            className: "color-pink",
                            onClick: function() {
                                $.showLoading("正在更换中...");
                                $.post("/phone/coverMember", {
                                    memberId: memberId,
                                    num: $(This).attr("data-num")
                                }, function (resultInfo) {
                                    $.hideLoading();
                                    if (resultInfo.code==0) {
                                        var src = This.context.style.backgroundImage
                                        var li1 = $(li[0]).context.style.backgroundImage
                                        if (src != $(li[0]).context.style.backgroundImage) {
                                            li[0].style.backgroundImage = src;
                                            $(li[0]).context.style.backgroundSize = 'cover';
                                            This.context.style.backgroundImage = li1;
                                        } else {
                                            return false
                                        }
                                    }else{
                                        $.alert("更换失败");
                                    }
                                }, "json");

                            }
                        },{
                            text: "删除照片",
                            className: 'color-pink',
                            onClick: function() {
                                $.showLoading("正在删除中...");
                                $.post("/phone/deleteMember", {
                                    memberId: memberId,
                                    num: $(This).attr("data-num")
                                }, function (resultInfo) {
                                    $.hideLoading();
                                    if (resultInfo.code==0) {
                                        This.context.style.backgroundImage = "";
                                        This.context.style.backgroundSize = 'initial';
                                    }else{
                                        $.alert("更换失败");
                                    }
                                }, "json");


                            }
                        }]
                });
            }
        });



        /*var $uploaderInput = $("#uploaderInput");
        $uploaderInput.on("change",
            function(e) {
                $.showLoading("正在上传中...");
                ajaxFileUploadReturn(id,function (src) {
                    This.context.style.backgroundSize = 'cover';
                    $(This).css("background-image", 'url(' + src + ')');
                    $.hideLoading();
                    setFile();
                })
            });*/

    });
</script>
</body>

</html>